<template>
	<view class="content">
		<div class="list">
			<div class="title">{{orderData.scenicSpotsName}}   {{  !orderData.scenicSpotsDescription ? '' : orderData.scenicSpotsDescription }}</div>
			<div class="main">
				<img :src="orderData.scenicSpotsPicture" alt="" class="scenic" v-if="orderData.scenicSpotsPicture"    >
				<div class="detail">
					<div class="time">时间：{{orderData.orderTime}}</div>
					<div class="number">数量：{{orderData.quantity}}</div>
					<div class="price">实付：{{  orderData.orderAmount  }}</div>
				</div>
			</div>
			<div class="more">
				<!-- {{orderData.orderStatus}} -->
				<div style="padding-left: 24rpx;width: 250rpx;" v-if="orderData.orderStatus == 0 "> 未使用 </div>
				<div style="padding-left: 24rpx;width: 250rpx;" v-else-if="orderData.orderStatus == 1 "> 已使用 </div>
				<div style="padding-left: 24rpx;width: 250rpx;" v-else-if="orderData.orderStatus == 2 "> 已过期 </div>
				<div style="padding-left: 24rpx;width: 250rpx;" v-else-if="orderData.orderStatus == 3 "> 已取消 </div>
				<div style="padding-left: 24rpx;width: 250rpx;" v-else-if="orderData.orderStatus == 4 "> 待确认 </div>
				<div style="padding-left: 24rpx;width: 250rpx;" v-else-if="orderData.orderStatus == 5 "> 被终端修改 </div>
				<div style="padding-left: 24rpx;width: 250rpx;" v-else-if="orderData.orderStatus == 6 "> 被终端撤销 </div>
				<div style="padding-left: 24rpx;width: 250rpx;" v-else-if="orderData.orderStatus == 7 "> 部分使用 </div>
				<div style="padding-left: 24rpx;width: 250rpx;" v-else-if="orderData.orderStatus == 8 "> 订单完结 </div>
				<div style="padding-left: 24rpx;width: 250rpx;" v-else-if="orderData.orderStatus == 9 "> 被删除 </div>
				<div style="padding-left: 24rpx;width: 250rpx;" v-else-if="orderData.orderStatus == 11 "> 待出票 </div>

				<!-- <img src="../../static/img/refund.png" alt="" @click="goRouter('/pages/refund/index')" v-if="orderData.orderStatus == 0 "> -->
				<img src="../../static/img/refund.png" alt="" @click="refundMoney" v-if="orderData.orderStatus == 0 ">
			</div>
		</div>
		<div class="list1">
			<div class="title1">订单信息</div>
			<div class="main1">
				<div v-if="orderData.contactName.includes(',')">
					<div class="main1_information" v-for="(item, index) in orderData.contactName.split(',')" :key="index">
						<div class="name1">游客姓名{{parseInt(index + 1)}}： </div>
						<div class="name2">{{ orderData.contactName.split(',')[index] }}</div>
					</div>
				</div>
				<div v-else>
					<div class="main1_information" v-for="(item, index) in orderData.contactName.split(',')" :key="index">
						<div class="name1">游客姓名： </div>
						<div class="name2">{{ orderData.contactName }}</div>
					</div>
				</div>
				
				<div class="main1_information">
					<div class="name1">联系号码： </div>
					<div class="name2">{{orderData.contactPhone}}</div>
				</div>
				<div class="main1_information">
					<div class="name1">订单编号： </div>
					<div class="name2">{{orderData.number}}</div>
					<img src="../../static/img/copy.png" alt="" @click="copyText(orderData.number)" >
				</div>
				<div class="main1_information">
					<div class="name1">下单时间：</div>
					<div class="name2">{{ orderData.orderTime }}</div>
				</div>
			
			</div>
			<!-- 核销二维码   -->
			
		</div>
		
		<div class="list2" v-if="orderData.orderStatus == 0 ">
			<div  v-if="!!orderData.qrcodeImage" style="padding-bottom: 24rpx">
				<image :src="orderData.qrcodeImage" mode="" class="codeImg"></image>
				<view class="code-msg">{{orderData.ticketCode }}</view>
			</div>
			
			<view class="code-msg cp-code"  v-if="!orderData.qrcodeImage">出票中, 请耐心等待</view>
			
		</div>
	</view>
	
</template>

<script>
	export default{
		data(){
			return{
				list:{
						title:'沈阳景区名称XXXXXX',
						time:'2024-01-01 19:30',
						number:1,
						price:'180元',
						src:"../../static/img/scenic.png"
					},
				orderList:{
					name:'张三',
					tel:'13555007788',
					orderNumber:'3636363636363636',
					time:'2024-01-01 19:30'
					
				},
				orderData: {}
			}
		},
		onLoad(params) {
			// console.log(params, '订单信息');
			// console.log(params.id, 'shenme信息')
			// console.log(JSON.parse(params.data))
			// this.orderData = JSON.parse(params.data);
			// console.log(this.orderData)
			this.$http({
				url:this.$myApi.orderList + '?id=' + params.id,
				method:'GET',
				hideLoading:true,
				data:{},
				success:res=>{
					// console.log(res)
					// this.orderData = res.rows[0];
					this.orderData = res.rows.filter(i => i.id == params.id)[0];
					this.orderData.orderAmount = parseFloat(this.orderData.orderAmount / 100 ).toFixed(2);

				},
				fail:err=>{
					console.log(err);
				},complete:e=>{
					this.status = 'nomore'
				}
			})
		},
		methods:{
			// 敬请期待
			jqqd() {
				uni.showToast({
					title: '敬请期待',
					duration: 2000,
					icon: 'none'
				});
			},
			// 申请退款
			refundMoney() {
				let data = this.orderData;
				uni.navigateTo({
					url: '/pages/refund/index' + '?id=' + data.id 
				})
			},
			// 复制
			copyText(text) {
				uni.setClipboardData({
					data: text,
					success(res) {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					},
					fail(err) {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			},
			goRouter(url, data) {
				uni.navigateTo({
					url: url + '?data=' + JSON.stringify(data) 
				})
			},
		}
		
	}
</script>
<style>
page {
	background-color:#F6F9FF;
	}
	
</style>
<style lang="scss" scoped>
.content{
	width: 100%;
	.list{
		width: 690rpx;
		height: 323rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		margin-left: 30rpx;
		margin-top: 20rpx;
		position: relative;
		.title{
			// width: 378rpx;
			height: 42rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #1C1C1C;
			line-height: 42rpx;
			margin-left: 26rpx;
			margin-top: 26rpx;
			position: absolute;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			width: 646rpx;
		}

		.main{
			display: flex;
			border-bottom:1rpx solid #C7C7C7;
			height: 224rpx;
			.scenic{
				width: 160rpx;
				height: 110rpx;
				margin-left: 26rpx;
				margin-top: 86rpx;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
			}
			.detail{
				margin-top: 74rpx;
				margin-left: 37rpx;
				.time{
					width: 468rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #212121;
					margin-top: 5rpx;
				}
				.number{
					width: 468rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #212121;
					margin-top: 5rpx;
				}
				.price{
					width: 468rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #212121;
					margin-top: 5rpx;
				}
			}
			
		}
		
		.more{
			display: flex;
			margin-top: 30rpx;
			position: relative;
			img{
				width: 120rpx;
				height: 40rpx;
				position: absolute;
				right: 16rpx;
			}
		}
	}
	.list1{
		width: 690rpx;
		// height: 323rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 24rpx 10rpx;
		opacity: 1;
		margin-left: 30rpx;
		margin-top: 20rpx;
		.title1{
			width: 112rpx;
			height: 40rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #4C4C4C;
			margin-left: 26rpx;
			padding-top: 13rpx;
		}
		.main1{
			.main1_information{
				display: flex;
				margin-left: 26rpx;
				margin-top: 28rpx;
				img{
					width: 90rpx;
					height: 30rpx;
					margin-top: 5rpx;
					margin-left: -15rpx;
				}	
				.name1{
					width: 170rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #787878;
				}
				.name2{
					width: 300rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #4C4C4C;
				}
			}
			
		}
	}
}
.list2 {
	text-align: center;
	width: 690rpx;
	height: 100%;
	background: #FFFFFF;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	padding: 12rpx 0rpx 12rpx 0rpx;
	margin-left: 30rpx;
	margin-top: 14rpx;
	image {
		width: 400rpx;
		height: 400rpx;
		margin-bottom: 8rpx;
	}
}
.cp-code {
	padding: 24rpx 0rpx 24px 0rpx;
}
</style>